<template>
  <div class="post" v-if="post">
    <h3>{{post.title}}</h3>
    <p class="pre">{{post.body}}</p>
</div>
<div v-else>加载中...</div>
</template>
<script setup>
import axios  from 'axios';
const route = useRoute();
const post = ref({});

async function Getdetails (id){
  try{
    const { data } = await axios("http://localhost:3000/posts/"+ id);
    post.value = data
    console.log(post.value)
  }catch(error){
    console.log(error);
  }

}
Getdetails(route.query.Id);
</script>
<style scoped>
.post {
  max-width: 1200px;
  margin: 0 auto;
}
.post p {
  color: #444;
  line-height: 1.5em;
  margin-top: 40px;
}
.pre {
  white-space: pre-wrap;
}

</style>